<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      button {
        margin-right: 10px;
      }
    </style>
  </head>
  
  <body>
    <div id="app">
      <!-- 每个按钮分别按下鼠标左键、中间键和右键，查看控制台输出 -->
      
      <!-- .left：按下鼠标左键时触发 -->
      <button @mousedown.left="console.log('left')">mousedown.left</button>
      
      <!-- .right：按下鼠标右键时触发 -->
      <button @mousedown.right="console.log('right')">mousedown.right</button>
      
      <!-- .middle：按下鼠标中间键时触发 -->
      <button @mousedown.middle="console.log('middle')">mousedown.middle</button>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp().mount('#app');
  </script>
</html>